<template>
    <div class="area-content-pro">
        <div id="main_eR"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal, "11111111");
                //新旧值不同
                setTimeout(() => {
                    this.iconName = this.datas
                    this.area()
                }, 1000);
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
        area() {
            var chartDom = document.getElementById('main_eR');
            var myChart = echarts.init(chartDom);
            var option;

            // prettier-ignore
            let dataAxis = ['A列取气', 'B列取气', 'C列取气', 'D列取气'];
            // prettier-ignore
            let data = [220, 182, 191, 234, 290];
            let yMax = 500;
            let dataShadow = [];
            for (let i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }
            option = {
                title: {
                    text: '',
                    subtext: ''
                },
                xAxis: {
                    type: 'category',
                    data: dataAxis,
                    axisLabel: {
                        interval: 0,
                        rotate: 0,
                        margin: 10
                    }
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#999'
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        showBackground: false,
                        barWidth: '25%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(198, 251, 255, 1)' },
                                { offset: 0.5, color: 'rgba(88, 163, 240, 1)' },
                                { offset: 1, color: 'rgba(0, 70, 141, 1)' }
                            ])
                        },
                        // emphasis: {
                        //   itemStyle: {
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //       { offset: 0, color: '#2378f7' },
                        //       { offset: 0.7, color: '#2378f7' },
                        //       { offset: 1, color: '#83bff6' }
                        //     ])
                        //   }
                        // },
                        data: data
                    }
                ]
            };
            // Enable data zoom when user click bar.
            const zoomSize = 6;
            myChart.on('click', function (params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue:
                        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
            });

            option && myChart.setOption(option);

        }
    }
}
</script>
<style lang="scss">
.area-content-pro {

    #main_eR {
        width: 363px;
        height: 324px;
    }
}
</style>